<template>
  <div class="about">
    <page-search
      :search-form-config="searchFormConfig"
      @searchBtnClick="handleQueryClick"
      @resetBtnClick="handleResetClick"
    />
    <page-content
      ref="pageContentRef"
      :content-table-config="tableConfig"
      pageName="users"
      @editBtnClick="handleEditBtnClick"
      @createBtnClick="handleNewBtnClick"
    >
      <template #enable="scope">
        <el-text
          v-if="scope.row.enable === 1"
          size="small"
          style="color: #67c23a; font-size: 13px"
          >开启</el-text
        >
        <el-text v-else size="small" style="color: #f56c6c; font-size: 13px"
          >关闭</el-text
        >
      </template>
    </page-content>

    <page-modal
      ref="pageModalRef"
      pageName="users"
      :modal-config="ModalConfigComputed"
      :default-info="defaultInfo"
    ></page-modal>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";

import PageContent from "@/components/page-content";
import PageSearch from "@/components/page-search";
import pageModal from "@/components/page-modal";

import { searchFormConfig } from "./config/search.config.js";
import { tableConfig } from "./config/table.config.js";
import { modalConfig } from "./config/modal.config.js";

import { usePageSearch } from "@/hooks/use-page-search.js";
import { usePageModal } from "@/hooks/use-page-modal.js";

import useAllDataStore from "@/store/all";

export default defineComponent({
  name: "user",
  components: { PageContent, PageSearch, pageModal },
  setup() {
    // PageSearch
    const [pageContentRef, handleQueryClick, handleResetClick] =
      usePageSearch();

    //1. 处理密码逻辑
    const newCallBack = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.field === "password"
      );
      passwordItem.isHidden = false;
    };
    const editCallBack = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.field === "password"
      );
      passwordItem.isHidden = true;
      //! 非空
    };

    // 2. 动态添加部门和角色列表
    const store = useAllDataStore();
    // 利用 computed(副作用功能) 监听 vuex中数据改变，当他改变时 重新执行函数(computed 的 getter函数)
    const ModalConfigComputed = computed(() => {
      const departmentItem = modalConfig.formItems.find(
        (item) => item.field === "departmentId"
      );
      departmentItem.options = store.$state.departmentList.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
      const roleItem = modalConfig.formItems.find(
        (item) => item.field === "roleId"
      );
      roleItem.options = store.$state.roleList.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
      return modalConfig;
    });

    // 3. 调用hook获取公共的变量和函数
    const [pageModalRef, defaultInfo, handleNewBtnClick, handleEditBtnClick] =
      usePageModal(newCallBack, editCallBack);

    return {
      tableConfig,
      searchFormConfig,
      // modalConfig,
      pageContentRef,
      handleQueryClick,
      handleResetClick,
      pageModalRef,
      defaultInfo,
      handleNewBtnClick,
      handleEditBtnClick,
      ModalConfigComputed,
    };
  },
});
</script>
